<template>
  <a-drawer title="#扫码" v-model:visible="visible" width="100%" v-if="visible" unmount-on-close :footer="false">
    <a-space direction="vertical" class="w-full">
      <a-form :model="form">
        <a-form-item label="" field="puttype">
          <a-radio-group type="button" v-model="record.puttype">
            <a-radio value="put">扫入</a-radio>
            <a-radio value="out">扫出</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="提单号" field="out_waybill_id">
          <a-input disabled v-model="record.public_number" placeholder="请输入提单号"/>

                </a-form-item>
                <a-form-item label="" field="puttype">
                    <a-radio-group type="button" v-model="record.inputtype">
                        <a-radio value="m">机器</a-radio>
                        <a-radio value="p">人工</a-radio>
                      </a-radio-group>
                </a-form-item>
                <a-form-item label="箱号" field="number">
                    <a-input :disabled="record.inputtype == 'm'" @input="debounce()" v-model="parcel.number"  placeholder="请输入箱号" />
                </a-form-item>
            </a-form>

            <a-list v-if="parcel.shipment">
                <a-list-item>
                    运单号: {{ parcel.shipment.shipment_no }}
                </a-list-item>
                <a-list-item>
                    <a-row class="grid-demo">
                        <a-col :span="12">
                          <div>总箱数: {{ parcel.shipment.volume_weight.parcel_total }}</div>
                        </a-col>
                        <a-col :span="12">
                          <div>已拣货: {{ parcel.shipment.volume_weight.parcel_count }}</div>
                        </a-col>
                      </a-row>
                </a-list-item>
                <a-list-item v-show="record.puttype=='put'">
                    <a-row class="grid-demo">
                        <a-col :span="12">
                          <div>本站数量: {{ parcel.self_count }}</div>
                        </a-col>
                        <a-col :span="12">
                          <div>本次扫入: {{ parcel.has_no }}</div>
                        </a-col>
                      </a-row>
                </a-list-item>

                <a-list-item v-show="record.puttype!='put'">
                    本次扫出: 1
                </a-list-item>
                <a-list-item v-show="record.puttype=='put'">
                    存疑:  
                    {{ parcel.shipment.work_order?.remark }}
                    <a-button  v-if="parcel.shipment.work_order" @click="confirm('请确认','确定取消存疑吗?',()=>{delProblem(parcel.shipment.work_order.id)})"  status="danger" type="primary">清除</a-button>
                    <a-button v-if="!parcel.shipment.work_order" type="primary" status="danger" @click="record.problem = true">添加</a-button>
                </a-list-item>
                <a-list-item v-show="record.problem">
                    <a-select v-model="parcel.problem" placeholder="选择原因" allow-clear>
                        <a-option v-for=" item in problem " :value="item.label">{{ item.label }}</a-option>
                      </a-select>
                </a-list-item>
                <a-list-item v-show="record.problem">
                    <a-button @click="confirm('请确认','确定添加存疑吗?',()=>{problemApi()})"  type="primary">存疑保存</a-button>
                    <a-button  type="secondary" @click="record.problem = false" >取消</a-button>
                </a-list-item>

                <a-list-item v-show="!record.problem && parcel.self_count > 0">
                    <a-button @click="confirm('请确认','确定'+(record.puttype=='put' ? '扫入':'扫出')+'吗?',()=>{put()})"  type="primary">确定{{ record.puttype=='put' ? '扫入':'扫出' }}</a-button>
                </a-list-item>
                
            </a-list>
            <a-list v-else>
                <a-list-item>
                    箱号不存在/或未扫描
                </a-list-item>
            </a-list>    
        </a-space>
        <confirm-modal ref="confirmModal" />
    </a-drawer>
</template>

<script setup lang="ts">
import {computed, inject, ref, watch} from "vue";
import {Message} from "@arco-design/web-vue";
import parcelApi from '@/api/document/parcel.js'
import waybillApi from '@/api/document/waybill.js'
import workOrder from '@/api/logistics/workOrder.js'
import ConfirmModal from '@/components/actions/confirmModal.vue'
const record = ref({})
const confirmModal = ref()
const visible = ref(false)
const parcel = ref({})
const form = ref({})
const timeout = ref()
const problem = ref([
    {
        label:'未贴单',
        value:'1',
    }
])
const onShow = async (data) => {
  record.value = data
  record.value.puttype = 'put'
  record.value.inputtype = 'm'
  record.value.problem = false
  visible.value = true
}

watch(visible,(newValue,oldValue)=>{
    if(!newValue){
        record.value = {}
        parcel.value = {}
    }
})

const debounce = () =>{
    if (timeout.value) {
        clearTimeout(timeout.value)
    };
    timeout.value = setTimeout(() => {
        getParcel()
    }, 500);
}
const getParcel = async () => {
    if(!parcel.value.number){
        return
    }
    let res = await parcelApi.readOne(parcel.value.number)
    if(res.success && res.data.shipment){
        parcel.value = res.data
    }else{
        parcel.value = {number:parcel.value.number}
    }
    record.value.problem = false
}

const confirm = (title,description,call)=>{
    confirmModal.value.show(title,description,call)
}

const put = async () => {
    let res;
    if(record.value.puttype == 'put'){
        res = await waybillApi.PutParcel({parcel:[parcel.value.id],out_waybill_id:record.value.public_number,all:1})
    }else if(record.value.puttype == 'out'){
        res = await waybillApi.OutParcel({parcel:[parcel.value.id]})
    }else{
        Message.error('请选择操作方式')
        return
    }
    if(res.success){
        Message.success('操作成功')
        parcel.value = {}
    }
}

const problemApi = async () =>{
    if(!parcel.value.problem){
        Message.error('请选择存疑类型')
        return
    }
   let res = await workOrder.save({
        about_id:parcel.value.shipment_id,
        about_type:"1",
        remark:parcel.value.problem,
        title:'存疑',
        intercept:[],
        user_visible:[],
    })
    if(res.success){
        Message.success('操作成功')
        parcel.value = {}
        record.value.problem = false
    }
}

const delProblem = async (id) =>{
    let res = await workOrder.close(id,{status:3})
    if(res.success){
        Message.success('操作成功')
        record.value.problem = false
        parcel.value = {}
    }
}

defineExpose({onShow})
</script>

<style>
    .arco-list-item-content{
        text-align:center;
    }
</style>